<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温馨提示</title>
    <style>
        .tip-box {
            position: fixed;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            font-family: "微软雅黑", sans-serif;
            max-width: 200px;
            text-align: center;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <script>
        // 温馨提示语列表
        const tips = [
            "好好爱自己", "保持好心情", "梦想成真", "多喝水哦~",
            "每天都要元气满满", "顺顺利利", "愿所有烦恼都消失", "早点休息",
            "今天过得开心嘛", "天冷了，多穿衣服"
        ];
        // 背景色列表
        const colors = ["#FFCCCC", "#CCFFCC", "#CCCCFF", "#FFCCFF", "#CCFFFF"];

        // 生成随机提示框
        function createTip() {
            const tipBox = document.createElement("div");
            tipBox.className = "tip-box";
            // 随机选择提示语和背景色
            tipBox.innerHTML = randomItem(tips);
            tipBox.style.backgroundColor = randomItem(colors);
            // 随机位置（适配手机屏幕）
            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;
            const left = Math.random() * (screenWidth - 200);
            const top = Math.random() * (screenHeight - 100);
            tipBox.style.left = `${left}px`;
            tipBox.style.top = `${top}px`;
            document.body.appendChild(tipBox);

            // 3秒后自动移除
            setTimeout(() => {
                tipBox.remove();
            }, 3000);
        }

        // 随机获取数组元素
        function randomItem(arr) {
            return arr[Math.floor(Math.random() * arr.length)];
        }

        // 循环创建提示框（间隔随机时间）
        setInterval(createTip, Math.random() * 5000 + 3000);
    </script>
</body>
</html>